import useGuestChannels from "@pages/home/hooks/useGuestChannels";
import GeekIcon from "@shared/geekIcon";
import styles from "@pages/home/widgets/channel/styles/edit.module.less";
import EditButton from "@pages/home/channel/common/EditButton";
import { useNavigate, useParams } from "react-router-dom";
import classNames from "classnames";
import { SlideRef } from "@shared/slide";
import { useState } from "react";
import { guestChannelSelectors } from "@slice/guestChannel";
import { useTypedSelector } from "@store/index";

interface Props {
    slideRef: React.RefObject<SlideRef | null>;
}

export default function Selected({ slideRef }: Props) {
    // 获取路由参数
    const { cid } = useParams();
    // 获取用于实现页面跳转的方法
    const navigate = useNavigate();
    // 控制 EditButton 的编辑状态 (双向数据绑定)
    const [editing, setEditing] = useState(false);
    // 获取访客频道列表数量
    const guestChannelTotal = useTypedSelector(guestChannelSelectors.selectTotal);
    // 获取访客频道列表
    const guestChannels = useGuestChannels()
    // 渲染视图
    return (
        <>
            <EditButton render={guestChannelTotal > 4} value={editing} onChange={setEditing} />
            {guestChannels.map((channel) => (
                <span
                    className={classNames({
                        [styles.active]: channel.id === Number(cid),
                    })}
                    onClick={() => {
                        navigate(`/${channel.id}`);
                        slideRef.current?.close();
                    }}
                >
                    {channel.name}
                </span>
            ))}
        </>
    );
}